﻿// 弹出框
.msgbox
    // 遮罩
    &-shadow
        position: fixed
        left: 0
        top: 0
        right: 0
        bottom: 0
        opacity: 0.4
        background-color: #000
        z-index: 10000
    // 父层
    &-modal
        display: flex
        justify-content: center
        position: fixed
        left: 0
        top: 0
        right: 0
        bottom: 0
        overflow-x: hidden
        overflow-y: auto
        z-index: 10001
    // 弹出框
    &
        position: relative
        width: 75vw
        height: 120px
        padding: 20px
        background-color: #fff
        box-sizing: border-box
        box-shadow: 2px 2px 16px #000
.msgbox
    // 位置中
    &-center
        align-self: center
    // 位置上
    &-top
        align-self: flex-start
    // 位置下
    &-bottom
        align-self: flex-end
// 弹出框按钮
.msgbox
    &-btn
        position: absolute
        bottom: 10px
        width: 76px
        text-align: center
        box-sizing: border-box
        border: 1px solid var-graybackse
        border-radius: 5px
        padding: 5px 10px
        background-color: var-grayback
        user-select: none
        font-size: 14px
        color: var-font-color
        outline: 0
        cursor: pointer
    &-ok
        right: 10px
    &-cancel
        right: 96px
    &-btn:hover
        background-color: var-graybackse
        color: #ffffff
// 按钮颜色
msgboxColors = { primary: var-primary, danger: var-danger, success: var-success }
for key, val in msgboxColors
    .msgbox.{key} .msgbox-btn
        background-color: val
msgboxColorsHover = { primary: var-primaryse, danger: var-dangerse, success: var-successse }
for key, val in msgboxColorsHover
    .msgbox.{key} .msgbox-btn:hover
        background-color: val
// prompt框的input
.msgbox-input
    display: block
    border-radius: 4px
    box-sizing: border-box
    padding: 4px 8px
    margin: 5px auto
    width: 100%
    border: 1px solid var-graybackse
    color: var-font-color
    background-color: #ffffff
    outline: 0
// PC屏
@media only screen and (min-width: 768px)
    .msgbox
        width: 360px
